<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="static/js/echarts.min.js"></script>
  <title>豆瓣top榜单</title>

  <link rel="stylesheet" href="static/css/tiny-slider.css">
  <link rel="stylesheet" href="static/css/animate.css">
  <link rel="stylesheet" href="static/css/tailwind.css">
</head>

<body class="dark:a0">

  <header class="header a1 a2 a3 a4">
    <div class="a5 a4 a6 a7 lg:a8 lg:a9 lg:a7 xl:aa 2xl:ab">
      <div class="ac ad[99] ae[250px] lg:a4 xl:ae[350px]">
        <a href="javascript:;" class="af">
          <img src="static/picture/logo-dark.svg" alt="logo" class="ag ah[50px] dark:ai">
          <img src="static/picture/logo-light.svg" alt="logo" class="ah[50px] dark:ag">
        </a>
      </div>
      <div
        class="menu-wrapper aj a2 a3 ak al a4 am an ao dark:a0 lg:ap lg:aq lg:a5 lg:ar lg:as lg:at lg:au lg:av dark:lg:at">
        <div class="a4 aw">
          <nav>
            <ul class="navbar a5 ax a9 am ay az lg:aA lg:as lg:aB lg:aC">
              <li>
                <a href="/index" class="menu-scroll active aD a9 am az aE aF aG hover:aH dark:hover:aI">
                  主页
                </a>
              </li>
              <li>
                <a href="/movie" class="menu-scroll aD a9 am az aE aF aG hover:aH dark:hover:aI">
                  电影
                </a>
              </li>
              <li>
                <a href="score" class="menu-scroll aD a9 am az aE aF aG hover:aH dark:hover:aI">
                  评分
                </a>
              </li>
              <li>
                <a href="word" class="menu-scroll aD a9 am az aE aF aG hover:aH dark:hover:aI">
                  词云
                </a>
              </li>
              <li>
                <a href="team" class="menu-scroll aD a9 am az aE aF aG hover:aH dark:hover:aI">
                  团队
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
      <div class="a1 a1a/2 a1b ak a5 a1c/2 a9 lg:aq lg:a1d">
        <label for="darkToggler" class="a1e dark:a1f z-40 ac a5 a1g a1h a1i a9 am a1j a1k dark:aI md:a1l md:a1m">
          <input type="checkbox" name="darkToggler" id="darkToggler" class="a1n" aria-label="darkToggler">
          <svg viewbox="0 0 23 23" class="a1o a1p a1q dark:ag md:a1r md:a1s" fill="none">
            <path
              d="M9.55078 1.5C5.80078 1.5 1.30078 5.25 1.30078 11.25C1.30078 17.25 5.80078 21.75 11.8008 21.75C17.8008 21.75 21.5508 17.25 21.5508 13.5C13.3008 18.75 4.30078 9.75 9.55078 1.5Z"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <svg viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"
            class="ag a1o a1p dark:ai md:a1r md:a1s">
            <mask id="path-1-inside-1_977:1934" fill="white">
              <path
                d="M12.0508 16.5C10.8573 16.5 9.71271 16.0259 8.8688 15.182C8.02489 14.3381 7.55078 13.1935 7.55078 12C7.55078 10.8065 8.02489 9.66193 8.8688 8.81802C9.71271 7.97411 10.8573 7.5 12.0508 7.5C13.2443 7.5 14.3888 7.97411 15.2328 8.81802C16.0767 9.66193 16.5508 10.8065 16.5508 12C16.5508 13.1935 16.0767 14.3381 15.2328 15.182C14.3888 16.0259 13.2443 16.5 12.0508 16.5ZM12.0508 18C13.6421 18 15.1682 17.3679 16.2934 16.2426C17.4186 15.1174 18.0508 13.5913 18.0508 12C18.0508 10.4087 17.4186 8.88258 16.2934 7.75736C15.1682 6.63214 13.6421 6 12.0508 6C10.4595 6 8.93336 6.63214 7.80814 7.75736C6.68292 8.88258 6.05078 10.4087 6.05078 12C6.05078 13.5913 6.68292 15.1174 7.80814 16.2426C8.93336 17.3679 10.4595 18 12.0508 18ZM12.0508 0C12.2497 0 12.4405 0.0790176 12.5811 0.21967C12.7218 0.360322 12.8008 0.551088 12.8008 0.75V3.75C12.8008 3.94891 12.7218 4.13968 12.5811 4.28033C12.4405 4.42098 12.2497 4.5 12.0508 4.5C11.8519 4.5 11.6611 4.42098 11.5205 4.28033C11.3798 4.13968 11.3008 3.94891 11.3008 3.75V0.75C11.3008 0.551088 11.3798 0.360322 11.5205 0.21967C11.6611 0.0790176 11.8519 0 12.0508 0V0ZM12.0508 19.5C12.2497 19.5 12.4405 19.579 12.5811 19.7197C12.7218 19.8603 12.8008 20.0511 12.8008 20.25V23.25C12.8008 23.4489 12.7218 23.6397 12.5811 23.7803C12.4405 23.921 12.2497 24 12.0508 24C11.8519 24 11.6611 23.921 11.5205 23.7803C11.3798 23.6397 11.3008 23.4489 11.3008 23.25V20.25C11.3008 20.0511 11.3798 19.8603 11.5205 19.7197C11.6611 19.579 11.8519 19.5 12.0508 19.5ZM24.0508 12C24.0508 12.1989 23.9718 12.3897 23.8311 12.5303C23.6905 12.671 23.4997 12.75 23.3008 12.75H20.3008C20.1019 12.75 19.9111 12.671 19.7705 12.5303C19.6298 12.3897 19.5508 12.1989 19.5508 12C19.5508 11.8011 19.6298 11.6103 19.7705 11.4697C19.9111 11.329 20.1019 11.25 20.3008 11.25H23.3008C23.4997 11.25 23.6905 11.329 23.8311 11.4697C23.9718 11.6103 24.0508 11.8011 24.0508 12ZM4.55078 12C4.55078 12.1989 4.47176 12.3897 4.33111 12.5303C4.19046 12.671 3.99969 12.75 3.80078 12.75H0.800781C0.601869 12.75 0.411103 12.671 0.270451 12.5303C0.129799 12.3897 0.0507813 12.1989 0.0507812 12C0.0507813 11.8011 0.129799 11.6103 0.270451 11.4697C0.411103 11.329 0.601869 11.25 0.800781 11.25H3.80078C3.99969 11.25 4.19046 11.329 4.33111 11.4697C4.47176 11.6103 4.55078 11.8011 4.55078 12ZM20.5363 3.5145C20.6769 3.65515 20.7559 3.84588 20.7559 4.04475C20.7559 4.24362 20.6769 4.43435 20.5363 4.575L18.4153 6.6975C18.3455 6.76713 18.2628 6.82235 18.1717 6.86C18.0806 6.89765 17.983 6.91699 17.8845 6.91692C17.6855 6.91678 17.4947 6.83758 17.354 6.69675C17.2844 6.62702 17.2292 6.54425 17.1915 6.45318C17.1539 6.36211 17.1345 6.26452 17.1346 6.16597C17.1348 5.96695 17.214 5.77613 17.3548 5.6355L19.4758 3.5145C19.6164 3.3739 19.8072 3.29491 20.006 3.29491C20.2049 3.29491 20.3956 3.3739 20.5363 3.5145ZM6.74678 17.304C6.88738 17.4446 6.96637 17.6354 6.96637 17.8342C6.96637 18.0331 6.88738 18.2239 6.74678 18.3645L4.62578 20.4855C4.48433 20.6221 4.29488 20.6977 4.09823 20.696C3.90158 20.6943 3.71347 20.6154 3.57442 20.4764C3.43536 20.3373 3.35648 20.1492 3.35478 19.9526C3.35307 19.7559 3.42866 19.5665 3.56528 19.425L5.68628 17.304C5.82693 17.1634 6.01766 17.0844 6.21653 17.0844C6.4154 17.0844 6.60614 17.1634 6.74678 17.304ZM20.5363 20.4855C20.3956 20.6261 20.2049 20.7051 20.006 20.7051C19.8072 20.7051 19.6164 20.6261 19.4758 20.4855L17.3548 18.3645C17.2182 18.223 17.1426 18.0336 17.1443 17.8369C17.146 17.6403 17.2249 17.4522 17.3639 17.3131C17.503 17.1741 17.6911 17.0952 17.8877 17.0935C18.0844 17.0918 18.2738 17.1674 18.4153 17.304L20.5363 19.425C20.6769 19.5656 20.7559 19.7564 20.7559 19.9552C20.7559 20.1541 20.6769 20.3449 20.5363 20.4855ZM6.74678 6.6975C6.60614 6.8381 6.4154 6.91709 6.21653 6.91709C6.01766 6.91709 5.82693 6.8381 5.68628 6.6975L3.56528 4.575C3.49365 4.50582 3.43651 4.42306 3.39721 4.33155C3.3579 4.24005 3.33721 4.14164 3.33634 4.04205C3.33548 3.94247 3.35445 3.84371 3.39216 3.75153C3.42988 3.65936 3.48557 3.57562 3.55598 3.5052C3.6264 3.43478 3.71014 3.37909 3.80232 3.34138C3.89449 3.30367 3.99325 3.2847 4.09283 3.28556C4.19242 3.28643 4.29083 3.30712 4.38233 3.34642C4.47384 3.38573 4.5566 3.44287 4.62578 3.5145L6.74678 5.6355C6.81663 5.70517 6.87204 5.78793 6.90985 5.87905C6.94766 5.97017 6.96712 6.06785 6.96712 6.1665C6.96712 6.26515 6.94766 6.36283 6.90985 6.45395C6.87204 6.54507 6.81663 6.62783 6.74678 6.6975Z">
              </path>
            </mask>
            <path
              d="M12.0508 16.5C10.8573 16.5 9.71271 16.0259 8.8688 15.182C8.02489 14.3381 7.55078 13.1935 7.55078 12C7.55078 10.8065 8.02489 9.66193 8.8688 8.81802C9.71271 7.97411 10.8573 7.5 12.0508 7.5C13.2443 7.5 14.3888 7.97411 15.2328 8.81802C16.0767 9.66193 16.5508 10.8065 16.5508 12C16.5508 13.1935 16.0767 14.3381 15.2328 15.182C14.3888 16.0259 13.2443 16.5 12.0508 16.5ZM12.0508 18C13.6421 18 15.1682 17.3679 16.2934 16.2426C17.4186 15.1174 18.0508 13.5913 18.0508 12C18.0508 10.4087 17.4186 8.88258 16.2934 7.75736C15.1682 6.63214 13.6421 6 12.0508 6C10.4595 6 8.93336 6.63214 7.80814 7.75736C6.68292 8.88258 6.05078 10.4087 6.05078 12C6.05078 13.5913 6.68292 15.1174 7.80814 16.2426C8.93336 17.3679 10.4595 18 12.0508 18ZM12.0508 0C12.2497 0 12.4405 0.0790176 12.5811 0.21967C12.7218 0.360322 12.8008 0.551088 12.8008 0.75V3.75C12.8008 3.94891 12.7218 4.13968 12.5811 4.28033C12.4405 4.42098 12.2497 4.5 12.0508 4.5C11.8519 4.5 11.6611 4.42098 11.5205 4.28033C11.3798 4.13968 11.3008 3.94891 11.3008 3.75V0.75C11.3008 0.551088 11.3798 0.360322 11.5205 0.21967C11.6611 0.0790176 11.8519 0 12.0508 0V0ZM12.0508 19.5C12.2497 19.5 12.4405 19.579 12.5811 19.7197C12.7218 19.8603 12.8008 20.0511 12.8008 20.25V23.25C12.8008 23.4489 12.7218 23.6397 12.5811 23.7803C12.4405 23.921 12.2497 24 12.0508 24C11.8519 24 11.6611 23.921 11.5205 23.7803C11.3798 23.6397 11.3008 23.4489 11.3008 23.25V20.25C11.3008 20.0511 11.3798 19.8603 11.5205 19.7197C11.6611 19.579 11.8519 19.5 12.0508 19.5ZM24.0508 12C24.0508 12.1989 23.9718 12.3897 23.8311 12.5303C23.6905 12.671 23.4997 12.75 23.3008 12.75H20.3008C20.1019 12.75 19.9111 12.671 19.7705 12.5303C19.6298 12.3897 19.5508 12.1989 19.5508 12C19.5508 11.8011 19.6298 11.6103 19.7705 11.4697C19.9111 11.329 20.1019 11.25 20.3008 11.25H23.3008C23.4997 11.25 23.6905 11.329 23.8311 11.4697C23.9718 11.6103 24.0508 11.8011 24.0508 12ZM4.55078 12C4.55078 12.1989 4.47176 12.3897 4.33111 12.5303C4.19046 12.671 3.99969 12.75 3.80078 12.75H0.800781C0.601869 12.75 0.411103 12.671 0.270451 12.5303C0.129799 12.3897 0.0507813 12.1989 0.0507812 12C0.0507813 11.8011 0.129799 11.6103 0.270451 11.4697C0.411103 11.329 0.601869 11.25 0.800781 11.25H3.80078C3.99969 11.25 4.19046 11.329 4.33111 11.4697C4.47176 11.6103 4.55078 11.8011 4.55078 12ZM20.5363 3.5145C20.6769 3.65515 20.7559 3.84588 20.7559 4.04475C20.7559 4.24362 20.6769 4.43435 20.5363 4.575L18.4153 6.6975C18.3455 6.76713 18.2628 6.82235 18.1717 6.86C18.0806 6.89765 17.983 6.91699 17.8845 6.91692C17.6855 6.91678 17.4947 6.83758 17.354 6.69675C17.2844 6.62702 17.2292 6.54425 17.1915 6.45318C17.1539 6.36211 17.1345 6.26452 17.1346 6.16597C17.1348 5.96695 17.214 5.77613 17.3548 5.6355L19.4758 3.5145C19.6164 3.3739 19.8072 3.29491 20.006 3.29491C20.2049 3.29491 20.3956 3.3739 20.5363 3.5145ZM6.74678 17.304C6.88738 17.4446 6.96637 17.6354 6.96637 17.8342C6.96637 18.0331 6.88738 18.2239 6.74678 18.3645L4.62578 20.4855C4.48433 20.6221 4.29488 20.6977 4.09823 20.696C3.90158 20.6943 3.71347 20.6154 3.57442 20.4764C3.43536 20.3373 3.35648 20.1492 3.35478 19.9526C3.35307 19.7559 3.42866 19.5665 3.56528 19.425L5.68628 17.304C5.82693 17.1634 6.01766 17.0844 6.21653 17.0844C6.4154 17.0844 6.60614 17.1634 6.74678 17.304ZM20.5363 20.4855C20.3956 20.6261 20.2049 20.7051 20.006 20.7051C19.8072 20.7051 19.6164 20.6261 19.4758 20.4855L17.3548 18.3645C17.2182 18.223 17.1426 18.0336 17.1443 17.8369C17.146 17.6403 17.2249 17.4522 17.3639 17.3131C17.503 17.1741 17.6911 17.0952 17.8877 17.0935C18.0844 17.0918 18.2738 17.1674 18.4153 17.304L20.5363 19.425C20.6769 19.5656 20.7559 19.7564 20.7559 19.9552C20.7559 20.1541 20.6769 20.3449 20.5363 20.4855ZM6.74678 6.6975C6.60614 6.8381 6.4154 6.91709 6.21653 6.91709C6.01766 6.91709 5.82693 6.8381 5.68628 6.6975L3.56528 4.575C3.49365 4.50582 3.43651 4.42306 3.39721 4.33155C3.3579 4.24005 3.33721 4.14164 3.33634 4.04205C3.33548 3.94247 3.35445 3.84371 3.39216 3.75153C3.42988 3.65936 3.48557 3.57562 3.55598 3.5052C3.6264 3.43478 3.71014 3.37909 3.80232 3.34138C3.89449 3.30367 3.99325 3.2847 4.09283 3.28556C4.19242 3.28643 4.29083 3.30712 4.38233 3.34642C4.47384 3.38573 4.5566 3.44287 4.62578 3.5145L6.74678 5.6355C6.81663 5.70517 6.87204 5.78793 6.90985 5.87905C6.94766 5.97017 6.96712 6.06785 6.96712 6.1665C6.96712 6.26515 6.94766 6.36283 6.90985 6.45395C6.87204 6.54507 6.81663 6.62783 6.74678 6.6975Z"
              fill="black" stroke="white" stroke-width="2" mask="url(#path-1-inside-1_977:1934)"></path>
          </svg>
        </label>
        <button class="menu-toggler ac ak a1t dark:aI lg:ag">
          <svg width="28" height="28" viewbox="0 0 28 28" class="cross ag aL">
            <path
              d="M14.0002 11.8226L21.6228 4.20001L23.8002 6.37745L16.1776 14L23.8002 21.6226L21.6228 23.8L14.0002 16.1774L6.37763 23.8L4.2002 21.6226L11.8228 14L4.2002 6.37745L6.37763 4.20001L14.0002 11.8226Z">
            </path>
          </svg>
          <svg width="22" height="22" viewbox="0 0 22 22" class="menu aL">
            <path
              d="M2.75 3.66666H19.25V5.49999H2.75V3.66666ZM2.75 10.0833H19.25V11.9167H2.75V10.0833ZM2.75 16.5H19.25V18.3333H2.75V16.5Z">
            </path>
          </svg>
        </button>
      </div>
    </div>
  </header>


  <section id="home" class="ac a36 a2T a37 a38 sm:a39 lg:a1u[170px] lg:a1A[120px]">
    <div class="a1 a10 a3 a2D a2a a4 a2x a2y a3n dark:a3o"
      style="background-image: url('static/image/NoisePattern.svg')"></div>
    <div class="a1 a2 a29 a2D">
      <svg width="1356" height="860" viewbox="0 0 1356 860" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.5" filter="url(#filter0_f_201_2181)">
          <rect x="450.088" y="-126.709" width="351.515" height="944.108" transform="rotate(-34.6784 450.088 -126.709)"
            fill="url(#paint0_linear_201_2181)"></rect>
        </g>
        <defs>
          <filter id="filter0_f_201_2181" x="0.0878906" y="-776.711" width="1726.24" height="1876.4"
            filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
            <feblend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feblend>
            <fegaussianblur stddeviation="225" result="effect1_foregroundBlur_201_2181"></fegaussianblur>
          </filter>
          <lineargradient id="paint0_linear_201_2181" x1="417.412" y1="59.4717" x2="966.334" y2="603.857"
            gradientunits="userSpaceOnUse">
            <stop stop-color="#ABBCFF"></stop>
            <stop offset="0.859375" stop-color="#4A6CF7"></stop>
          </lineargradient>
        </defs>
      </svg>
    </div>
    <div class="a1 a10 a3 a2D">
      <svg width="1469" height="498" viewbox="0 0 1469 498" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="filter0_f_201_2182" x="-450" y="0" width="1919" height="1161" filterunits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
            <feflood flood-opacity="0" result="BackgroundImageFix"></feflood>
            <feblend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feblend>
            <fegaussianblur stddeviation="225" result="effect1_foregroundBlur_201_2182"></fegaussianblur>
          </filter>
          <lineargradient id="paint0_linear_201_2182" x1="-94.7239" y1="501.47" x2="-65.8058" y2="802.2"
            gradientunits="userSpaceOnUse">
            <stop stop-color="#ABBCFF"></stop>
            <stop offset="0.859375" stop-color="#4A6CF7"></stop>
          </lineargradient>
        </defs>
      </svg>
    </div>
  </section>


  <section id="features" class="a1P sm:a1Q lg:a1u[130px]">
    <div class="a1v xl:a1w">

      <div class="wow fadeInUp ac a1B a2J ae[620px] a1C az md:a1U lg:a3p" data-wow-delay=".2s">
        <span class="title">top榜 </span>
        <h2 class="a1I aE a1J a1G a1t dark:aI sm:a1L md:a1F[50px] md:a3f[60px]">
          豆瓣电影top榜单数据分析
        </h2>
        <p class="aF aG">
          数据根据电影榜单上的评分，观影人数等各个方面进行数据分析
        </p>
      </div>
      <div class="a1R a5 a6 am">
        <div id="main" style="width: 100%;height:400px"></div>
        <div class="a4 a1v md:a1S/2 lg:a1S/3">

          <div class="wow fadeInUp aJ a1B a1M ae[380px] az md:a3q" data-wow-delay=".2s">


          </div>

        </div>
      </div>


    </div>
    </div>
  </section>




  <footer class="wow fadeInUp a1P sm:a1Q lg:a1u[130px]" data-wow-delay=".2s">
    <div class="a1v xl:a1w">
      <div class="dark:a1z[#2E333D] md:a2d">
        <div class="a1R a5 a6 a2e md:a2f">
          <div class="a4 a1v md:a1S/2 lg:a1W/3">
            <div class="a1I a5 a9 am a12 a1x aV dark:a1z[#2E333D] md:a2g md:as md:a2h md:a2i">
              <a href="javascript:void(0)" class="aE aF aG hover:aH">
                English
              </a>
              <a href="javascript:void(0)" class="aE aF aG hover:aH">
                Privacy Policy
              </a>
              <a href="javascript:void(0)" class="aE aF aG hover:aH">
                Support
              </a>
            </div>
          </div>
          <div class="a4 a1v md:a1S/2 lg:a1S/3">
            <div>
              <p class="az aE aF aG lg:a2j">
                Copyright &copy; 2022.Company name All rights reserved.<a target="_blank"
                  href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>


  <a href="javascript:void(0)" class="hover:a2k back-to-top aj a2l a2m a2n ad[999] ag a2o a2p a9 am a2q a16 aI a2r aN">
    <span class="a2s[6px] a2t a1T a2u a2d a2c a2v"></span>
  </a>


  <script data-cfasync="false" src="static/js/email-decode.min.js"></script>
  <script src="static/js/tiny-slider.js"></script>
  <script src="static/js/typewriter.js"></script>
  <script src="static/js/isotope.min.js"></script>
  <script src="static/js/wow.min.js"></script>
  <script src="static/js/main.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '电影评分图'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        top:'20%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: {{ score|tojson}}
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: {{num}},
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    // section menu active
    function onScroll(event) {
      const sections = document.querySelectorAll(".menu-scroll");
      const scrollPos =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      for (let i = 0; i < sections.length; i++) {
        const currLink = sections[i];
        const val = currLink.getAttribute("href");
        const refElement = document.querySelector(val);
        const scrollTopMinus = scrollPos + 73;
        if (
          refElement.offsetTop <= scrollTopMinus &&
          refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
        ) {
          document.querySelector(".menu-scroll").classList.remove("active");
          currLink.classList.add("active");
        } else {
          currLink.classList.remove("active");
        }
      }
    }

    window.document.addEventListener("scroll", onScroll);
    // ==== About Tabs
    const tabButtons = document.querySelectorAll(".tabButtons button");
    const tabPanels = document.querySelectorAll(".tabPanel");

    function showPanel(panelIndex) {
      tabButtons.forEach(function (node) {
        node.classList.remove(
          "aH",
          "a28",
          "dark:a28"
        );
      });
      tabButtons[panelIndex].classList.add(
        "aH",
        "dark:aI",
        "a28",
        "dark:a28"
      );
      tabPanels.forEach(function (node) {
        node.style.display = "none";
      });
      tabPanels[panelIndex].style.display = "flex";
    }
    showPanel(0);

    //========= testimonial
    tns({
      container: ".testimonial-active",
      items: 1,
      slideBy: "page",
      autoplay: false,
      mouseDrag: true,
      gutter: 0,
      nav: false,
      controlsText: [
        `<svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            class="aL"
          >
            <path
              d="M6.52329 10.8331L10.9933 15.3031L9.81496 16.4814L3.3333 9.99978L9.81496 3.51811L10.9933 4.69645L6.52329 9.16645L16.6666 9.16645L16.6666 10.8331L6.52329 10.8331Z"
              
            />
          </svg>`,
        `<svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            class="aL"
          >
            <path
              d="M13.4767 9.16689L9.00671 4.69689L10.185 3.51855L16.6667 10.0002L10.185 16.4819L9.00671 15.3036L13.4767 10.8336H3.33337V9.16689H13.4767Z"
              
            />
          </svg>`,
      ],
    });

    //============== isotope masonry js

    const elem = document.querySelector(".portfolio-grid");
    const iso = new Isotope(elem, {
      // options
      itemSelector: ".grid-item",
      masonry: {
        // use outer width of grid-sizer for columnWidth
        columnWidth: ".grid-sizer",
      },
    });

    const filterButtons = document.querySelectorAll(
      ".portfolio-btn-wrapper button"
    );
    filterButtons.forEach((e) =>
      e.addEventListener("click", () => {
        const filterValue = event.target.getAttribute("data-filter");
        iso.arrange({
          filter: filterValue,
        });
      })
    );

    //======= portfolio-btn active
    var elements = document.querySelectorAll(".portfolio-btn-wrapper button");
    for (var i = 0; i < elements.length; i++) {
      elements[i].onclick = function () {
        // remove class from sibling

        var el = elements[0];
        while (el) {
          if (el.tagName === "BUTTON") {
            //remove class
            el.classList.remove("active");
          }
          // pass to the new sibling
          el = el.nextSibling;
        }

        this.classList.add("active");
      };
    }
  </script>
</body>

</html>